<template>
	<view class="container">
		<view class="content">
			<view class="top-box">
				<view class="fs50 fw6">Hi 你好</view>
				<view>欢迎使用科目三，让你轻松拿证</view>
			</view>
			<view class="login-box">
				<view v-if="pwd_vc">
					<view class="mui_img">
						<span class="telPlus">+86</span>
						<input class="mui-input-clear" v-model="phoneNum"  placeholder="输入登录账号" />
					</view>
				</view>
				<view v-else>
					<view class="mui_img">
						<!-- <image :src='getImgUrl("login/login_user_normal.png")' /> -->
						<input cursor-spacing="20" class="mui-input-clear-1" v-model="phoneNum"
							placeholder="输入登录账号" />
					</view>
					<view class="mui_img">
						<!-- <image :src='getImgUrl("login/login_psw_normal.png")' /> -->
						<input cursor-spacing="20" type="password" v-model="password" class="mui-input-clear-1" placeholder="输入密码" />
					</view>
				</view>
				
				<view class="agreement-box">
					<radio :checked="isAgreed" value="1" @click="changeRadio()">
						我已阅读并同意
					</radio>
					<text class="text-blue top2"
						@click='publicJump("service_agreement","用户服务协议")'>《用户服务协议》</text>
					<text class="top2">和</text>
					<text class="text-blue top2"
						@click='publicJump("privacy_policy","隐私政策协议")'>《隐私政策协议》</text>
				</view>
				<view v-if="pwd_vc">
					<view class="mui_btn">
						<button @click="login_code()" type="primary" :disabled="!isAgreed">登 录</button>
					</view>
					<view class="mui_forgive" @click="handleChange()">
						切换密码登录
					</view>
				</view>
				<view v-else class="mui_btn">
					<button @click="login_pwd()" type="primary" :disabled="!isAgreed">登 录</button>
					<view class="mui_forgive">
						<span class="fl" @click="gocode()">手机号登录</span>
						<span class="fr" @click="goregister()">注册</span>
						<!-- 
						<span class="fr"
							@click="changeRoute('/pagesMy/user_settings/sign_in_pwd')">忘记密码</span> -->
					</view>
				</view>
			</view>
		</view>
		
		<!-- #ifdef APP-PLUS -->
		<view class="model-box" v-show="showAgreeModel">
			<view class="model-nav">
				<view class="model-title">用户使用协议和隐私政策</view>
				<view style="text-indent: 56rpx;">
					请你务必审慎阅读、充分理解“用户使用协议”和“隐私政策”各条款，
					包括但不限于:为了更精确的向你提供自定义头像，考场位置信息，
					定位当前位置等服务，我们需要收集您的设备上的照片、
					媒体内容和文件，申请位置权限等。你可以在“设置”中查看、变更、
					删除个人信息并管理你的授权。你可以阅读
					<text class="text-blue"
						@click='publicJump("service_agreement","用户服务协议")'>《用户服务协议》</text>和
					<text class="text-blue"
						@click='publicJump("privacy_policy","隐私政策协议")'>《隐私政策》</text>
					了解详细信息。如你同意，请点击'同意'开始接受我们的服务;
				</view>
				<view class="btn-box text-blue">
					<view @click="tuichuapp()">暂不使用</view>
					<view @click="handleAgree()">同意</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		
	</view>
</template>

<!-- <script src="http://47.120.57.175/anonym/userauth/login/?mode=&source=app"/> -->
<script>
	
	import {
		showTishi,
		phone_ver
	} from 'utils/index.js';

	import {
		handleLogin
	} from '@/common/api/login.js';
	import {
		gettoken
	} from '@/common/api/index.js'
	// import CryptoJS from 'crypto-js';
	import {
		Base64
	} from '@/common/js_sdk/js-base64';
	import md5 from '@/common/js_sdk/js-md5/src/md5.js';

	export default {
		data() {
			return {
				pwd_vc: false, //true=密码  false验证码 
				// password: 'Admin@123',
				// phoneNum: 'admin',  
				password: '',
				phoneNum: '',
				showAgreeModel: false,
				isAgreed: false,
				token:{}
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			// console.log(uni.getStorageSync('agreeModelShow'),'询问model要显示吗')
			this.showAgreeModel = !uni.getStorageSync('agreeModelShow')
			// #endif
			
			
			
		// 第一步获取到token
			this.gettokenmethods()
		},
		methods: {
			// 跳转到注册页面
			goregister(){ 
				uni.navigateTo({
					url: '/pages/login/register', // 替换为你的 tabBar 页面路径
					success: function(res) {
						// 跳转成功的回调
						console.log(res, '跳转成功')
					},
					fail: function(err) {
						// 错误处理
						console.log(err, '为什么不跳转')
					}
				});
			},
			// 获取token信息
			gettokenmethods(){
				gettoken({username:'admin',password:'Admin@123'}).then(res=>{
					this.token=res
				})
			},
			gocode(){
				uni.navigateTo({
					url: '/pages/login/code'
				})	
			},
			handleChange(){
				this.pwd_vc = !this.pwd_vc
				this.isAgreed = false
				if(!this.pwd_vc){
					// this.password='Admin@123';
					// this.phoneNum='admin';
					this.password='';
					this.phoneNum=''; 
				}else{ 
					this.password='';
					this.phoneNum='';
				}
			},
			handleAgree() {
				if (plus.os.name.toLowerCase() === 'android') {
					plus.runtime.agreePrivacy()
				}
				uni.setStorageSync('agreeModelShow', true)
				this.isAgreed = true
				this.showAgreeModel = false
			},
			changeRadio() {
				this.isAgreed = !this.isAgreed
			},
			// =====账号密码登录=====
			login_pwd() {
				var _this = this
				// 登录账号不一定是手机号，目前不做手机号的校验!phone_ver(_this.phoneNum)
				if (_this.phoneNum=='') {
					showTishi('请输入登录账号')
				} else if (_this.password == '') {
					showTishi('请输入登录密码')
				} else if(!this.isAgreed){
					uni.showToast({
						title: '请选择用户协议和隐私政策',
						icon: 'none'
					})
				}else{
					// gettoken({username:_this.phoneNum,password:_this.password}).then(res=>{
					// 	this.token=res;
					// 	uni.setStorageSync('JWTtoken', this.token.access)
					// 	handleLogin(_this.phoneNum,_this.password,_this.token);
					// })
					
					// 获取登录信息
					handleLogin(_this.phoneNum,_this.password);
					
				}
			},
			login_code() {
				if (!phone_ver(this.phoneNum)) {
					showTishi('请填写正确的手机号')
				} else if(!this.isAgreed){
					uni.showToast({
						title: '请选择用户协议和隐私政策',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login_code?phone=' + this.phoneNum
					})
					// let openid=uni.getStorageSync('openId')
					// if(openid){
					// 	this.password=openid
					// 	this.login_pwd()
					// }else{
					// 	uni.showToast({
					// 		title: '暂无openid',
					// 		icon: 'none'
					// 	})
					// }
				}
			},
			changeRoute(url) {
				uni.navigateTo({
					url: url
				})
			},
			publicJump(url, title) {
				uni.navigateTo({
					url: '/pages/public_jump?url=' + url + '&title=' + title
				})
			},
			tuichuapp() {
				if (plus.os.name.toLowerCase() === 'android') {
					plus.runtime.disagreePrivacy()
					plus.runtime.quit();
				} else {
					const threadClass = plus.ios.importClass("NSThread");
					const mainThread = plus.ios.invoke(threadClass, "mainThread");
					plus.ios.invoke(mainThread, "exit");
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		top: 50rpx;
		padding: 1rem;
		position: relative;
	}

	.top-box {
		font-size: 30rpx;
		color: #666;
		line-height: 60rpx;
		padding-bottom: 2rem;

		.fw6 {
			color: #040404;
			font-weight: bold;
			font-size: 40rpx;
		}
	}

	.mui_img image {
		float: left;
		width: 40rpx;
		height: 40rpx;
		margin-top: 25rpx;
	}

	.mui_img {
		border-radius: 5px;
		height: 90rpx;
		line-height: 90rpx;
		position: relative;
		background: #f7f7f7;
		padding: 0 8px;
	}

	.mui_img:first-child {
		margin-bottom: 30rpx;
	}

	.telPlus {
		float: left;
		height: 100%;
		font-size: 26rpx;
		width: 30rpx;
	}



	.mui-input-clear {
		font-size: 28rpx;
		margin-left: 12%;
		width: 80%;
		vertical-align: middle;
		border: none;
		border-radius: 0px;
		height: 90rpx;
	}

	.mui-input-clear-1 {
		float: left;
		font-size: 28rpx;
		margin-left: 3%;
		width: 90%;
		vertical-align: middle;
		border: 1px solid #F38010;
		border-radius: 16rpx;
		border-radius: 10px;
		height: 90rpx;
		padding-left: 20rpx;
	}


	.mui_btn {
		text-align: center;
		clear: both;
		position: relative;
		top: 10px;
	}

	.mui_forgive {
		margin-top: 60rpx;
		font-size: 28rpx;
		color: #ada9a9;
		display: flex;
		justify-content: space-between;
	}

	.agreement-box {
		color: #ada9a9;
		font-size: 25rpx;
		margin-top: 30px;
		margin-bottom: 10px;
		text-align: center;
		.top2{
			position: relative;
			top: 2px;
		}
	}

	.text-blue{
		color: #007AFF;
	}
	.model-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.8);

		.model-nav {
			float: left;
			width: 70%;
			background: #FFFFFF;
			padding: 20rpx 30rpx;
			border-radius: 24rpx;
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

			.model-title {
				text-align: center;
				width: 100%;
				line-height: 80rpx;
				font-size: 40rpx;
				color: #000;
				font-weight: bold;
			}
			.btn-box {
				margin-top: 30rpx;
				line-height: 80rpx;
				font-size: 40rpx;
				display: flex;
				justify-content: space-around;
			}
		}
	}
</style>
